<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" >
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta content="telephone=no" name="format-detection">
	<meta name="description" content="在求知的世界，距离从来就不是问题"/>
    <meta name="keywords" content="谜语者,科技,瞬语，提问，回答，投资，创业"/>
	<title>H5 demo</title>
	<link rel="icon" href="img/logo.ico">
    <link rel="stylesheet" href="css/jquery.fullPage.css" type="text/css"/>
    <style type="text/css">
    	.section{
    		background: url('img/bg1.jpg') 50% 50% no-repeat;
    		background-size:cover;
    	}
    	.section:nth-child(2){
    		background-image: url('img/bg2.jpg');
    	}
    	.section:nth-child(3){
    		background-image: url('img/bg3.jpg');
    	}
    	.section:nth-child(4){
    		background-image: url('img/bg4.jpg');
    	}
    	.section:nth-child(5){
    		background-image: url('img/bg5.jpg');
    	}
    	.img1{width:40%;max-height: 80%;}
    	/*.img2{
    		height: 50%;
    	}*/
    	.sec2>.fp-tableCell{vertical-align: bottom;}
    	.txt{position: absolute;left: 50%;top:0;color:#fff;}
    	.img2{
    		transform:scale(.1);
    		-webkit-transform:scale(.1);
    		height: 60%;
    	}
    </style>
</head>
<body>
<div id="fullpage" style="text-align: center;font-size:40px;">
	<div class="section">
		<p>page 1</p>
	</div>
	<div class="section sec2" style="vertical-align: bottom;">
		<img class="img1" src="img/iphone-blue.png">
		<p class="txt" >瞬语</p>
		<!-- <img class="img2" src="img/iphone-red.png"> -->
	</div>
	<div class="section">
		<div class="slide"> Slide 1 </div>
    	<div class="slide"> Slide 2 </div>
    	<div class="slide"> Slide 3 </div>
    	<div class="slide"> Slide 4 </div>
	</div>
	<div class="section">
		<img class="img2" src="img/iphone-red.png">
	</div>
	<div class="section">page 5</div>

</div>

<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="js/jquery.fullPage.min.js" type="text/javascript"></script>
<script src='js/move.min.js' type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#fullpage").fullpage({
			sectionsColor:['green','orange','gray','red','pink'],
			continuousVertical:true,
			navigation:true,
			resize:true,
			navigationTooltips:[1,2,3,4,5],
			navigationColor:'#921',
			showActiveTooltip:true,
			afterLoad:function(link,index){
				switch(index){
					case 1:
						console.log("load");
						move(".section p").scale(.5).end();
					break;
					case 2:
					$(".img1").css("opacity","1");
						// var back=move(".section .img1").translate(0,200);
						move(".section .img1").translate(0,-200).duration('1.5s').then().scale(1.5).end(function(){
							 move(".section .txt").set('top','160px').scale(2).end();
							 console.log("tet");
						});

					break;
					case 4:
						move(".img2").scale(1).duration("1.5s").end();
					break;
				}
			},
			onLeave:function(index,nextIndex,direction){
				switch(index){
					case 1:
						console.log("leave");
						move(".section p").set('top','200px').scale(1).end();
					break;
					case 2:
						$(".img1").css("opacity","0");
						
						move(".section .img1").translate(0,200).then().scale(1).end(function(){

							 move(".section .txt").set('top','0').scale(1).end();
							 console.log("tet");
						});

					break;
					case 4:
						move(".img2").scale(.1).duration("0s").end();
					break;
				}
			}

		});

	});
</script>
</body>
</html>